<script setup>
import QuestionItem from './QuestionItem.vue'
</script>
<template>
    <div class="question" style="background: url(https://cars.zuchecdn.com/static/static-img/questionBg.png)
    center center / cover no-repeat;">
        <div class="question-title">租车Q&amp;A</div>
        <div class="question-subtitle">每一个阶段，都值得留下美好时刻</div>
        <div class="question-content">
            <div class="question-content-item">
                <QuestionItem title="Q1" sub-title="租车需要哪些证件？">
                    <div>身份证：大陆用户驾驶员二代身份证，年满18周岁，有效期需 超过当次租期一个月以上。</div>
                    <div>驾驶证：本人国内有效驾驶证（正副本），有效期需超过当次租期一个月以上。</div>
                    <div>港澳台客户准备澳港内地通行证或台湾居民来往大陆通行证，有效期超过当次租期两个月以上。</div>
                    <div>外籍客户提供护照，有效期超过当次租期两个月以上。</div>
                </QuestionItem>
                <QuestionItem title="Q4" sub-title="可以开哪些发票?">
                    <div>国内租订单还车结算后以订单为单位，为您开具增值税发票；支持电子发票和纸质发票。</div>
                </QuestionItem>
            </div>
            <div class="question-content-item">
                <QuestionItem title="Q2" sub-title="有哪些网络预订方式？">
                    <div>身份证：大陆用户驾驶员二代身份证，年满18周岁，有效期需 超过当次租期一个月以上。</div>
                    <div>驾驶证：本人国内有效驾驶证（正副本），有效期需超过当次租期一个月以上。</div>
                    <div>港澳台客户准备澳港内地通行证或台湾居民来往大陆通行证，有效期超过当次租期两个月以上。</div>
                    <div>外籍客户提供护照，有效期超过当次租期两个月以上。</div>
                </QuestionItem>
                <QuestionItem title="Q5" sub-title="租车费用有哪些?">
                    <div>必缴费用包括：车辆租赁及服务费、基础服务费、车辆整备费共三项。</div>
                    <div>其他费用包括：送车上门服务费、上门取车服务费、跨网点还车服务费、异地还车服务费、加油服务费、超时服务费等。</div>
                </QuestionItem>
            </div>
            <div class="question-content-item">
                <QuestionItem title="Q3" sub-title="有哪些预订流程？">
                    <div>只需四步即可完成预订。</div>
                    <div>第1步：确定需要取还的地址和时间。</div>
                    <div>第2步：选择取还的网点和车型。</div>
                    <div>第3步：选择承租人。</div>
                    <div>第4步：订单确认，完成预订。</div>
                </QuestionItem>
                <QuestionItem title="Q6" sub-title="可以选择哪些出行保障?">
                    <div >
                        我们已为您提供基础服务保障，同时您也可以购买尊享服务、尊享百万服务、尊享驾乘守护和全程无忧，让您的出行更安心。
                    </div>
                </QuestionItem>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.question {
    padding: 55px 0 37px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fafafa;
    background-size: cover;

}

.question-title {
    height: 40px;
    font-size: 32px;
    font-weight: 400;
    color: #171721;
    line-height: 40px;
    letter-spacing: 2px;
}

.question-content {
    display: flex;
    margin-top: 36px;
}

.question-subtitle {
    height: 24px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #686876;
    line-height: 24px;
}

.question-content-item {
    width: 380px;
    margin: 0 15px;
}
</style>